import helloWorld from "./helloworld"
import imgSrc from './assets/1.png'
import logoSvg from './assets/用户.svg'
import exmText from './assets/3.txt'
import jpgMap from './assets/2.jpg'
import BookData from './assets/data.xml'
import Notes from './assets/data.csv'
import toml from './assets/data.toml'
import yaml from './assets/data.yaml'
import json5 from './assets/data.json5'

// js中引用的css less文件需要使用css-loader less-loader处理
import './style.css'
import './style.less'

// 代码抽离 动态导入
import './async-module'
// 代码抽离 静态导入
import _ from 'lodash'

helloWorld()

const img = document.createElement('img')
img.src = imgSrc
document.body.appendChild(img)

const img2 = document.createElement('img')
img2.src = logoSvg
document.body.appendChild(img2)

const block = document.createElement('div')
block.textContent = exmText
block.style.cssText = 'width:200px;height:200px;background:blue'
block.classList.add('block-bg')
document.body.appendChild(block)

const img3 = document.createElement('img')
img3.src = jpgMap
document.body.appendChild(img3)

document.body.classList.add('hello')

const span = document.createElement('span')
span.classList.add('icon')
span.innerHTML = '毛笔书法毛笔书法'
document.body.appendChild(span)

// xml转化为 js对象
console.log(BookData);
// csv转化为 数组
console.log(Notes);

// 3种配置文件
console.log(toml);
console.log(yaml);
console.log(json5);

// 静态使用
console.log(_.join(['another', 'module', 'loaded'], ' '));

// 懒加载举例
const button = document.createElement('button')
button.textContent = '点击执行加法'
button.addEventListener('click', () => {
    // 点击后才加载math.js 首次进入页面不加载
    // 注释1 指定打包后的bundle的文件名
    // 注释2 预获取Prefetch 性能高于懒加载
    import(/* webpackChunkName: 'math', webpackPrefetch: true */'./math.js').then(({ add }) => {
        console.log(add(4, 5))
    })
})
document.body.appendChild(button)